<script setup lang="ts">
import { ref,watch } from 'vue'
import $api from '@/api/index'
import {useRouter} from 'vue-router'
const $router=useRouter()

const chCates=ref([])
const title=ref('')
const {data:cates}=$api.cate.getList()
watch(cates,(_cates) =>{
  changeCate(_cates[0])
})
const pid=ref('')
const changeCate=(item) =>{
  pid.value=item._id
  title.value=item.name
  const {data:chs}=$api.cate.getList(pid.value)
  watch(chs,(_chs:[]) =>{
    chCates.value=_chs
  })
}
const clickCate=(item) =>{
  $router.push({
    name:'goods-list',
    query:{
      id:item._id
    }
  })
}
</script>

<template>
  <div
    w:flex="~"
  >
    <div
      w:flex="~ col none"
      w:bg="cool-gray-200"
    >
      <div v-for="(item,idx) in cates" :class="{active:pid==item._id}" :key="item._id" @click="changeCate(item)"
        w:flex="~ col"
        w:justify="center"
        w:align="items-center"
        w:w="48"
        w:h="28"
        w:text="xl"
      >{{item.name}}</div>
    </div>
    <div
      w:flex="1"
    >
      <div
        w:m="4"
        w:font="lg extrabold"
      >{{title}}</div>
      <div
        w:flex="~ wrap"
        w:align="items-center"
        w:m="4"
      >
        <div v-for="(item,idx) in chCates" :key="item._id" @click="clickCate(item)"
          w:flex="~ col"
          w:align="items-center"
          w:w="1/3"
        >
        <img :src="item.icon"
          w:w="32"
          w:h="32"
          w:bg="cover"
        />
        <div>{{item.name}}</div>  
      </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.active{
  background: #fff;
  color: #f02b2b;
  border-left: 3PX solid #f02b2b;
}
</style>

<route>
{
  name: "cate",
  meta: {
    roles: [],
    cache: true,
    isTabBar: true
  }
}
</route>